<extend name="Common/baseView"/>
<block name="body">

    <div style="padding: 10px;">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>产品添加</legend>
        </fieldset>

        <form class="layui-form" enctype="multipart/form-data" action="{:U('Goods/updateGoods')}" method="post">

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">产品名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" lay-verify="required" placeholder="请输入名称"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid " style="color: red;font-size: 12px;">*</div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">产品价格</label>
                    <div class="layui-input-inline">
                        <input type="text" name="price" lay-verify="required|number" placeholder="请输入产品价格"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid " style="color: red;font-size: 12px;">*</div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">材质颜色</label>
                    <div class="layui-input-inline">
                        <input type="text" name="material_color" lay-verify="required" placeholder="请输入材质颜色"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid " style="color: red;font-size: 12px;">*</div>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">产品数量</label>
                    <div class="layui-input-inline">
                        <input type="text" name="pro_num" lay-verify="number" placeholder="请输入单个产品所含数量"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid " style="color: red;font-size: 12px;">可选</div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">产品规格</label>
                    <div class="layui-input-inline">
                        <input type="text" name="pro_stanrad" lay-verify="" placeholder="请输入单个产品规格"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid " style="color: red;font-size: 12px;">可选，例：81*21*13cm</div>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">产品大小</label>
                    <div class="layui-input-inline">
                        <input type="text" name="pro_size" lay-verify="" placeholder="请输入单个产品规格"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid " style="color: red;font-size: 12px;">可选，例：大型、小型</div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">适用节日</label>
                    <div class="layui-input-inline">
                        <input type="text" name="festival" lay-verify="required" placeholder="请输入适用节日"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid " style="color: red;font-size: 12px;">* &nbsp;例：情人节,520表白日,七夕节</div>
                </div>
            </div>


            <!--产品品类-->
            <div class="layui-form-item">
                <label class="layui-form-label">产品分类</label>
                <div class="layui-input-inline">
                    <select id="class" name="class" lay-filter="class" lay-verify="required">
                        <option value="">选择品类</option>
                    </select>
                </div>
                <!--0-->
                <div class="layui-input-inline" style="">
                    <select id="type"  name="type" lay-filter="type" lay-verify="required">
                        <option value="">选择类型</option>
                    </select>
                </div>
                <!--1-->
                <div class="layui-input-inline" style="">
                    <select id="series"  name="series" lay-filter="series" lay-verify="required">
                        <option value="">选择系列</option>
                    </select>
                </div>
                <!--2-->
                <div class="layui-input-inline" style="">
                    <select id="stanrand"  name="stanrand" lay-filter="stanrand" lay-verify="required">
                        <option value="">选择规格</option>
                    </select>
                </div>
                <div class="layui-form-mid " style="color: red;font-size: 12px;">每项必选一项*</div>
            </div>
            <!--产品场景-->
            <div class="layui-form-item">
                <label class="layui-form-label">产品场景</label>
                <div class="layui-input-inline">
                    <select id="situation" name="situation" lay-filter="situation" lay-verify="required">
                        <option value="">选择场景</option>
                    </select>
                </div>
                <div class="layui-form-mid " style="color: red;font-size: 12px;">*</div>
            </div>
            <!--产品对象-->
            <div class="layui-form-item">
                <label class="layui-form-label">产品对象</label>
                <div class="layui-input-inline">
                    <select id="target" name="target" lay-filter="target" lay-verify="required">
                        <option value="">选择对象</option>
                    </select>
                </div>
                <div class="layui-form-mid " style="color: red;font-size: 12px;">*</div>
            </div>

            <!--产品图添加-->

                <div class="layui-form-item">
                    <div id="slideimg" >
                        <button type="button" class="layui-btn " id="test"><i class="fa fa-plus-square"
                                                                              aria-hidden="true"></i>&nbsp;&nbsp;产品轮播图
                        </button>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="layui-badge ">按照顺序添加</span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div id="detailimg" >
                        <button type="button" class="layui-btn " id="test1"><i class="fa fa-plus-square"
                                                                               aria-hidden="true"></i>&nbsp;&nbsp;产品详情图
                        </button>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="layui-badge ">按照顺序添加</span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block" style="padding-left: 35%">
                        <button type="submit" class="layui-btn" id="submit" lay-submit lay-filter="save">提交</button>
                        <button type="reset" id="reset" class="layui-btn layui-btn-primary" style="margin-left: 10%">重置</button>
                    </div>
                </div>

        </form>
    </div>
</block>
<block name="js">
    //JavaScript代码区域
    <script>
        $('#addGoods').addClass("layui-this");
        $('#goods').addClass("layui-nav-itemed");

        layui.use(['form','layer','jquery'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery;
            form.render();
            /*
            * 产品品类获取
            * */

            $.post("{:U('Goods/showCategory')}", {type: 2}, function (res) {
                var classData = res;
                var obj = jQuery.parseJSON(classData);
                for (var i = 0; i < obj.length; i++) {
                    $('#class').append("<option value='" + obj[i]['id'] + "'>" + obj[i]['value'] + "</option>");
                }
                form.render('select');
                /*
                 * 监听每次的点击，故可以直接移除之前的操作，在重新添加
                 * */
                form.on('select(class)', function (data) {
                    //移除上一次更新的option
                    $('#type').children('option').remove();
                    $('#type').append("<option value=''>选择类型</option>");
                    $('#series').children('option').remove();
                    $('#series').append("<option value=''>选择系列</option>");
                    $('#stanrand').children('option').remove();
                    $('#stanrand').append("<option value=''>选择规格</option>");
                    for (var j = 0; j < obj.length; j++) {
                        if (obj[j]['id'] == data.value) {
                            for (var k = 0; k < obj[j]['son'].length; k++) {
                                //根据数据表中分配到的order进行添加
                                if (obj[j]['son'][k]['order'] == 0) {
                                    $('#type').append("<option value='" + obj[j]['son'][k]['id'] + "'>" + obj[j]['son'][k]['value'] + "</option>");
                                }
                                if (obj[j]['son'][k]['order'] == 1) {
                                    $('#series').append("<option value='" + obj[j]['son'][k]['id'] + "'>" + obj[j]['son'][k]['value'] + "</option>");
                                }
                                if (obj[j]['son'][k]['order'] == 2) {
                                    $('#stanrand').append("<option value='" + obj[j]['son'][k]['id'] + "'>" + obj[j]['son'][k]['value'] + "</option>");
                                }
                            }
                        }
                    }
                    form.render('select');
                });
            });

            /*
            *
            * 产品场景获取
            * */
            $.post("{:U('Goods/showCategory')}", {type: 1}, function (res) {
                var situationData = res;
                var obj = jQuery.parseJSON(situationData);
                for (var i = 0; i < obj.length; i++) {
                    $('#situation').append("<option value='" + obj[i]['id'] + "'>" + obj[i]['value'] + "</option>");
                }
                form.render('select');
                /*
                 * 由于非自动添加分类，故不需要继续选择子分类
                 * */
            });

            /*
             * 产品对象
             * */
            $.post("{:U('Goods/showCategory')}", {type: 0}, function (res) {
                var targetData = res;
                var obj = jQuery.parseJSON(targetData);

                for (var i = 0; i < obj.length; i++) {
                    $('#target').append("<option value='" + obj[i]['id'] + "'>" + obj[i]['value'] + "</option>");
                }
                form.render('select');
                /*
                 * 由于非自动添加分类，故不需要继续选择子分类
                 * */
            });

        });


        /*图片添加逻辑*/
        var temp = 0;
        var temp2 = 0;
        var sort = 1;
        var sort2 = 1;

        /*产品轮播图添加*/
        $('#test').on('click', function () {

            if (temp == 0) {
                $('#slideimg').append("<blockquote id='listimg' class='layui-elem-quote layui-quote-nm' style='margin-top: 10px;'>轮播图上传：<div class='layui-input-block layui-anim layui-anim-up'><span class='layui-badge layui-bg-blue'>" + sort + "</span><input type='file' name = 'photo[]' style='font-size: 15px;width: 190px; padding-left: 15px;' ><input type='button'  name ='deleteBtn' class=' deleteBtn layui-btn  layui-btn-sm layui-btn-radius layui-btn-danger' style=' margin-left: 20px;' value='一'></div></blockquote> ");
                $('#test').text('继续添加');
                temp = 1;
            } else {
                $('#listimg').append("<div class='layui-input-block layui-anim layui-anim-up'><span class='layui-badge layui-bg-blue'>" + sort + "</span><input type='file' name = 'photo[]' style=' font-size: 15px;width: 190px; padding-left: 15px; ' ><input type='button'  name ='deleteBtn' class=' deleteBtn layui-btn layui-btn-sm layui-btn-radius layui-btn-danger' style=' margin-left: 20px;' value='一'></div>");
            }
            sort++;
            /*图片删除按钮*/
            var deleteBTN = document.getElementsByName('deleteBtn');

            for (var i = 0; i < deleteBTN.length; i++) {
                deleteBTN[i].onclick = function () {
//                    var parentofImg = document.getElementById('#slideimg');
                    this.parentNode.parentNode.removeChild(this.parentNode);
//
                }
            }
        });

        /*产品详情图添加*/
        $('#test1').on('click', function () {

            if (temp2 == 0) {
                $('#detailimg').append("<blockquote id='detaillist' class='layui-elem-quote layui-quote-nm' style='margin-top: 10px;'>详情图上传：<div class='layui-input-block layui-anim layui-anim-up'><span class='layui-badge layui-bg-blue'>" + sort2 + "</span><input type='file' name = 'detailphoto[]' style='font-size: 15px;width: 190px; padding-left: 15px;' ><input type='button' name ='deleteBtn' class=' deleteBtn layui-btn layui-btn-sm layui-btn-radius layui-btn-danger' style=' margin-left: 20px;' value='一'></div></blockquote> ");
                $('#test1').text('继续添加');
                temp2 = 1;
            } else {
                $('#detaillist').append("<div class='layui-input-block layui-anim layui-anim-up'><span class='layui-badge layui-bg-blue'>" + sort2 + "</span><input type='file' name = 'detailphoto[]' style=' font-size: 15px;width: 190px; padding-left: 15px; ' ><input type='button'  name ='deleteBtn' class=' deleteBtn layui-btn layui-btn-sm layui-btn-radius layui-btn-danger' style=' margin-left: 20px;' value='一'></div>");
            }
            sort2++;
            /*图片删除按钮*/
            var deleteBTN = document.getElementsByName('deleteBtn');
            for (var i = 0; i < deleteBTN.length; i++) {
                deleteBTN[i].onclick = function () {
                    this.parentNode.parentNode.removeChild(this.parentNode);
                }
            }
        });
        /*
         * 重置按钮清除图片
         * */
        $('#reset').on('click',function(){
            $('#slideimg').children('#listimg').children().remove();
            $('#detailimg').children('#detaillist').children().remove();
            sort = 1;
            sort2 = 1;
        });


    </script>
</block>
